<style>
  td { padding: 10px }
</style>
<div style="-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl">
  <table>
    <tr id="tr1">
      <td id="td1a"><span id="s1a">1-A</span></td>
      <td id="td1b"><span id="s1b">1-B</span></td>
    </tr>
    <tr id="tr2">
      <td id="td2a"><span id="s2a">2-A</span></td>
      <td id="td2b"><span id="s2b">2-B</span></td>
    </tr>
  </table>
  <script src="../../../resources/testharness.js"></script>
  <script src="../../../resources/testharnessreport.js"></script>
  <script>
    function doesRectContainRect(parent, child) {
      if (child.top < parent.top) {
        return false;
      }
      if (child.bottom > parent.bottom) {
        return false;
      }
      if (child.left < parent.left) {
        return false;
      }
      if (child.right > parent.right) {
        return false;
      }
      return true;
    }

    function rectToString(rect) {
      return "(" + rect.left + " " + rect.top + " - " + rect.right + " " + rect.bottom + ")"
    }

    function assert_contains(parent, child, description) {
      assert_true(doesRectContainRect(parent, child),
                  description + " " + rectToString(parent) + " should contain " + rectToString(child));
    }

    function checkRowColumn(row, column) {
      var columnName = ["a", "b", "c", "d", "e"];
      var trId = "tr" + (row + 1);
      var tr = document.getElementById(trId);
      var trRect = tr.getBoundingClientRect();
      var name = (row + 1).toString() + "-" + columnName[column].toUpperCase();
      var spanId = "s" + (row + 1) + columnName[column];
      var span = document.getElementById(spanId);
      var spanRect = span.getBoundingClientRect();
      assert_contains(trRect, spanRect, name);
    }

    test(function() {
      for (var row = 0; row < 2; row++) {
        for (var column = 0; column < 2; column++) {
          checkRowColumn(row, column);
        }
      }
    }, "The child of td should be inside of tr in vertical table");
  </script>
</div>
